@charset "UTF-8";

.trigger, .toptrigger, .triggerLabel, .toptriggerlabel {
	display: none;
}

.triggerLabel {
	display: initial;
	border: 1px solid #bbb;
	border-radius: 10px 0px 0px 10px;
	background: #e3e8f3 url(images/hborder.png) repeat-x 0px -2003px;
	width: 25px;
	height: 60px;
	position: absolute;
	top: 50px;
	right: 0;
	z-index: 1;
	/*transition: right 1s;*/
	cursor: pointer;
}
.triggerLabel:before {
	content: "\25C0";
	font-size: 22px;
	padding-left: 3px;
	position: absolute;
	padding-top: 5px;
	margin: 35% 0;
}

/*Trick to hide the menu when the user taps out of the menu*/
.toptrigger:checked {
	display: block;
	opacity: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	position: absolute;
}
.trigger:checked+.triggerLabel {
	right: 166px;
}

.trigger:checked+.triggerLabel:before {
	content: "\25B6";
}

/* shows the top menu when the user taps the menu icon */
.toptrigger:checked+label+div>div>table {
	display: block !important;
}

/* selects the side panel */
.trigger+.triggerLabel+div {
	width: 0 !important;
	background: white;
	z-index: 1;
	/*transition: width 1s;*/
	border-left: 1px solid #bbb;
}
.trigger:checked+.triggerLabel+div {
	width: 166px !important;
}

/* selects the div containing the canvas */
.trigger+.triggerLabel+div+div {
	width: 100% !important;
}

/*
for triggerLabel:
	width: 25px;
	height: 60px;
for display width < 1000px:
	width = 2.5vw (2.5 percent of 1000px and etc.)
	height = 6vw

+ font-size=22px => font-size: 2.5vw
+ border-radius=10px => border-radius=1vw

try it:
*/

@media (max-width: 1000px) {
	.triggerLabel {
		width: 2.5vw;
		height: 6vw;
		border-radius: 1vw 0px 0px 1vw;
	}
	.triggerLabel:before{
		font-size: 2.5vw;
		padding-left: 0.3vw;
		padding-top: 0.5vw;
	}
}